<template>
  <div>
    <m-Header fixed title="豆瓣电影" class="page-header"></m-Header>
    <div class="page-container">
      <m-movie-group :list="inTheaters" title="影院热映"></m-movie-group>
      <div class="line"></div>
      <m-movie-group :list="comingSoon" title="即将上映"></m-movie-group>
      <div class="line"></div>
    </div>
  </div>
</template>
<script>
  import { Header } from 'mint-ui'
  import mCell from '../../components/cell'
  import mMovieGroup from './movie-components/MovieGroup'
  import { bus } from '../../bus.js'
  export default {
    name: 'Movie',
    data() {
      return {
        inTheaters:[],
        comingSoon:[]
      }
    },
    components: {
      'mHeader': Header,
      mCell,
      mMovieGroup
    },
    
    created () {
      
    
      
    },
    mounted () {
       this.axios.all([this.getInTheaters(), this.getComingSoon()]).then(this.axios.spread((inTheaters, comingSoon)=> {
        this.inTheaters=inTheaters.data.subjects;
        this.comingSoon=comingSoon.data.subjects;
       
        // 两个请求现在都执行完成
       bus.$emit('initSwiper');
      }));
    },
    methods: {
        getInTheaters(){
          return this.axios.get('api/movie/in_theaters?count=10')
          // .then((res)=>{
          //   this.inTheaters=res.data.subjects;

          // }).catch((error)=>{
          //   console.log(error)
          // })
        },
        getComingSoon(){
         return this.axios.get('api/movie/coming_soon?count=10')
        //  .then((res)=>{
        //     this.comingSoon=res.data.subjects;
        //   }).catch((error)=>{
        //     console.log( error)
        //   })
        }
    }

  }
</script>
<style lang="less">
@import "../../assets/less/var.less";
.movie-cell{
  &.m-cell:before{
    height: 0
  }
  .more{
   
    color: @defaultColor;
  }
}

</style>